<template>
    <div class="container">
        <van-nav-bar title="异常上报" left-arrow  @click-left="onClickLeft"/>
        <div class="content">
            <p>异常设备:</p>
            <select v-model="deviceVal" disabled>
                <option :value="deviceVal">{{ deviceOpt }}</option>
            </select>
            <p>异常类型:</p>
            <select v-model="statusVal">
                <option value="监控故障">监控故障</option>
            </select>
            <p>异常描述</p>
            <textarea v-model="textVal" placeholder="描述异常设备"></textarea>
            <button @click="goReport">上报异常</button>
        </div>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router';
import { 
    goLookDeviceDetails,
    goReportAnomalies
} from '@/api/DeviceManage';
import { onMounted,ref } from 'vue';
import { showToast } from 'vant';
const route = useRoute()
const router = useRouter()
const onClickLeft = () => { //点击返回
    router.push({
        path:'/DeviceDetails',
        query:{
            id:route.query.equipmentId
        }
    })
}

let deviceVal = ref('')//异常设备的value
let deviceOpt = ref('')//异常设备的option
let statusVal = ref('监控故障')//异常类型的value
let textVal = ref('')//多行文本输入框的value
const goLookDeviceDetailsFun = async () => { //获取当前id的设备
    let goLookDeviceDetailsData = {
        pageIndex:1,
        pageSize:1,
        id:route.query.equipmentId
    }
    try{
        const res = await goLookDeviceDetails(goLookDeviceDetailsData)
        if(res.data.code == 200){
            console.log(res);
            deviceVal.value = res.data.dataset.list.id
            deviceOpt.value = res.data.dataset.list.address
        }
    }catch(error){}
}


const goReport = async () => { //点击上报异常进行上报
    let goReportAnomaliesData = {
        equipmentId:deviceVal.value,
        abnormalType:statusVal.value,
        abnormalDescription:textVal.value
    }
    for(let index in goReportAnomaliesData){
        if(!goReportAnomaliesData[index]){
            delete goReportAnomaliesData[index]
        }
    }
    try{
        const res = await goReportAnomalies(goReportAnomaliesData)
        if(res.data.code == 200){
            showToast('异常上报成功')
            setTimeout(()=>{ onClickLeft() },1000)
        }else{
            showToast('请将上报信息填写完整')
        }
    }catch(error){}
}
onMounted(() => {
    goLookDeviceDetailsFun()
})
</script>

<style lang="less" scoped>
.container{
    height:100vh;
    background-color: #F9F9F9;
    :deep(.van-nav-bar .van-icon){
        color:#000
    }
    .content{
        width:100vw;
        font-size: 4em;
        box-sizing: border-box;
        padding:1.5em 1em 0 1em;
        display: flex;
        flex-direction: column;
        gap:1em;
        p{
            font-weight: bold;
        }
        select{
            height:4em;
            border-radius: 0.6em;
            box-sizing: border-box;
            padding:0 1em;
        }
        textarea{
            height:8em;
            border-radius: 0.6em;
            box-sizing: border-box;
            padding:1em;
            resize: none;
        }
        button{
            width:9em;
            height:3em;
            color:#fff;
            background-color: #005DFF;
            border:none;
            border-radius: 2em;
            font-weight: bold;
            margin:0 auto;
            margin-top: 5em;
        }
    }
}
</style>